<style>
    .spantk {
        margin-top: 2px;
        /*width: 320px !important;*/
    }
    #layuiadmin-app-form-submit .layui-card-header{
        height:34px;
        line-height:34px;
        font-size:1.14em;
        color:#808080
    }
    #layuiadmin-app-form-submit .layui-form-label{
        padding:5px 8px 5px 1px;
    }
    #layuiadmin-app-form-submit .layui-card-body{
        padding:5px 8px 15px 8px;
    }
    #layuiadmin-app-form-submit .layui-form-item {
        height:38px;
        margin-bottom:0px;
    }
    #layuiadmin-app-form-submit .layui-form-label{
        color:#7e7e7e;
        font-size:0.8em;
    }
    #layuiadmin-app-form-submit .layui-col-space15 > * {
        padding: 3.8px;
    }

    #layuiadmin-app-form-submit .layui-table-cell {
        height:28px !important;
    }
    #layuiadmin-app-form-submit layui-table-header {
        height:28px !important;
    }
    
    .sp1{
        color:#7e7e7e;
        font-weight:600;
        font-size:0.94em;
    }
    .sp2{
        color:#5f5f5f;
        font-size:1.1em;
        font-weight:600;
    }
    .sp3{
        color:#9a9a9a;
        font-size:0.82em;
    }
    .sp4{
        color:#5f5f5f;
        font-size:0.88em;
    }
    .bksp {
        color: white;
        background: #3464b0;
        border: 3px solid #3464b0;
        border-radius: 3px;
        cursor: pointer;
    }
    .bksp1 {
        color: white;
        background: #393D49;
        border: 3px solid #393D49;
        border-radius: 3px;
        cursor: pointer;
    }

</style>
<div  class="layui-form" lay-filter="layuiadmin-app-form-submit" id="layuiadmin-app-form-submit"
    style="padding: 0px 30px 0 0;">
    <script type='text/html' template lay-done="layui.data.formdone(d.params)">
        <input type='hidden' name='PID' id="PID" />
    </script>
    <div style="padding: 10px; background-color: #F2F2F2;">
        <div class="layui-row layui-col-space15">

            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-header">收货信息</div>
                    <div class="layui-card-body">
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">收货人</label>
                                <div class='layui-input-inline spantk' style="width:150px">
                                    <span id="UserName"></span>
                                </div>
                                <label class="layui-form-label">联系电话</label>
                                <div class='layui-input-inline spantk' style="width:150px">
                                    <span id="UserTel"></span>
                                </div>
                                <label class="layui-form-label">收货地址</label>
                                <div class='layui-input-inline spantk' style="width:520px">
                                    <span id="UserAddress"></span>
                                </div>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">订单备注</label>
                                <div class='layui-input-block spantk'>
                                    <span id="RMKsq"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-header">订单信息</div>
                    <div class="layui-card-body">
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">订单号</label>
                                <div class='layui-input-inline spantk' style="width:170px">
                                    <span id="OrderNumber" style="color:#000000;font-size:1.1em;font-weight:bold;"></span>
                                </div>
                                <label class="layui-form-label">交易单号</label>
                                <div class='layui-input-inline spantk' style="width:170px">
                                    <span id="BillCodestr" style="color:#000000;font-size:1.1em;font-weight:bold;"></span>
                                </div>
                                <label class="layui-form-label">下单人</label>
                                <div class='layui-input-inline spantk' style="width:350px;">
                                    <span id="MemberInfo" style="color:#2F4056;"></span>
                                </div>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">订单状态</label>
                                <div class='layui-input-inline spantk' style="width:170px">
                                    <span id="StateName" style="color:#1396d0;font-weight:bold;"></span>
                                </div>
                                <label class="layui-form-label">支付状态</label>
                                <div class='layui-input-inline spantk' style="width:170px">
                                    <span id="BillStateName" style="color:#ff6a00;font-weight:bold;"></span>
                                </div>
                                <label class="layui-form-label">配送方式</label>
                                <div class='layui-input-inline spantk' style="width:395px;">
                                    <span id="DistributionMode_Sel" style="font-weight:bold;"></span>
                                    <span id="PickInfo" style="font-size:0.8em;"></span>
                                </div>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">订单金额</label>
                                <div class='layui-input-inline spantk' style="width:170px">
                                    <span style="color:red">￥</span><span id="OrderPrice" style="color:red;font-weight:bold;font-size:1.2em;">0</span>
                                </div>
                                <label class="layui-form-label">运费</label>
                                <div class='layui-input-inline spantk' style="width:170px">
                                    <span style="color:red">￥</span><span id="FarePrice" style="color:red;font-weight:bold;font-size:1.2em;">0</span>
                                </div>
                                <label class="layui-form-label">优惠金额</label>
                                <div class='layui-input-inline spantk' style="width:170px">
                                    <span style="color:red">￥</span><span id="DiscountPrice" style="color:red;font-weight:bold;font-size:1.2em;">0</span>
                                </div>
                                <label class="layui-form-label">实付金额</label>
                                <div class='layui-input-inline spantk' style="width:100px">
                                    <span style="color:red">￥</span><span id="PayPrice" style="color:red;font-weight:bold;font-size:1.2em;">0</span>
                                </div>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">是否团购单</label>
                                <div class='layui-input-inline spantk' style="width:170px">
                                    <span id="IsGroupBuy" style="color:#2F4056;font-weight:bold;"></span>
                                </div>
                                <label class="layui-form-label">是否使用优惠劵</label>
                                <div class='layui-input-inline spantk' style="width:170px">
                                    <span id="IsUseCoupon" style="color:#2F4056;font-weight:bold;"></span>
                                </div>
                                <label class="layui-form-label">优惠劵编码</label>
                                <div class='layui-input-inline spantk' style="width:170px">
                                    <span id="CouponCode" style="color:#2F4056;font-weight:bold;"></span>
                                </div>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">下单时间</label>
                                <div class='layui-input-inline spantk' style="width:170px">
                                    <span id="CreateTime" style="color:#2F4056;"></span>
                                </div>
                                <label class="layui-form-label">付款时间</label>
                                <div class='layui-input-inline spantk' style="width:170px">
                                    <span id="PayTime" style="color:#2F4056;"></span>
                                </div>
                                <label class="layui-form-label">确认收货时间</label>
                                <div class='layui-input-inline spantk' style="width:170px">
                                    <span id="ConfirmTime" style="color:#2F4056;"></span>
                                </div>
                            </div>
                        </div>
                        
                    </div>
                </div>
            </div>

            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-header">商品信息</div>
                    <div class="layui-card-body">
                        <!--<span style="color:green;font-size:0.90em;">商品信息 注：部分发货点击表格中 "点击发货数量" 对应的表格输入发货数量</span>-->
                        <script type="text/html" template lay-done="layui.data.sendParams(d.params)">
                            <table id="LAY-app-content-listsq" lay-filter="LAY-app-content-listsq"></table>
                        </script>
                    </div>
                </div>
            </div>


            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-header">发货信息</div>
                    <div class="layui-card-body">
                        <ul class="layui-timeline" id="wlist">
                            <!--<li class="layui-timeline-item">
                                <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                                <div class="layui-timeline-content layui-text">
                                    <span class="sp1">发货时间：</span><span class="sp2">2020-09-02 13:32:21</span>
                                    <span class="sp1" style="margin-left:42px;">发货人：</span><span class="sp2">齐心文具</span>
                                    <span class="sp1" style="margin-left:42px;">发货单号：</span><span class="sp2">YZ20071321431138</span>
                                    <br />
                                    <span class="sp3">发货类型：</span><span class="sp4">邮寄发货</span>
                                    <span class="sp3" style="margin-left:25px;">发货终端：</span><span class="sp4">网点（全流程测试店铺）</span>
                                    <br />
                                    <span class="sp3">快递单号：</span><span class="sp4">28473723839290223</span>
                                    <span class="sp3" style="margin-left:25px;">快递公司：</span><span class="sp4">邮政速递</span>
                                    <input type="button" onclick="searchwl()" value='查询物流' class='layui-btn layui-btn-xs'>
                                </div>
                            </li>-->
                        </ul>
                    </div>
                </div>
            </div>


            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-header">退款信息</div>
                    <div class="layui-card-body">
                        <script type="text/html" template lay-done="layui.data.orderreturn(d.params)">
                            <table id="LAY-app-content-listre" lay-filter="LAY-app-content-listre"></table>
                        </script>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>


<script>
    layui.use(['admin', 'table', 'element', 'form', 'formSelects'], function () {
        var $ = layui.$
            , admin = layui.admin
            , view = layui.view
            , table = layui.table
            , form = layui.form;

      

    });

    layui.data.formdone = function (d) {
        var $ = layui.$
            , admin = layui.admin
            , form = layui.form;

        //发货单信息
        admin.req({
            url: layui.setter.APIUrl + '/shop/Order_deliverMgr/GetListByOrderId' //实际使用请改成服务端真实接口
            , data: { "orderid": d.PID }
            , type: "post"
            , done: function (res) {
                if (res.Data.length > 0) {
                    var html = ""
                    $.each(res.Data, function (i, obj) {
                        //debugger;
                        var DeliverType = "未知";
                        if (obj.DeliverType == 0)
                            DeliverType = "邮寄发货"
                        else if (obj.DeliverType == 1)
                            DeliverType = "自提发货";
                        else if (obj.DeliverType == 2)
                            DeliverType = "核销发货";
                        else if (obj.DeliverType == 3)
                            DeliverType = "其他发货";

                        var TagEnd = "未知";
                        if (obj.TagEnd == 0)
                            TagEnd = "网点";
                        else if (obj.TagEnd == 1)
                            TagEnd = "供应商";
                        TagEnd += "（" + obj.TagEndIDName + "）"

                        var wl = "";
                        if (obj.DeliverType == 0) {
                            wl = `<br />
                                    <span class ="sp3">快递单号：</span><span class="sp4">${obj.ExpressNumber}</span>
                                    <span class ="sp3" style="margin-left:25px;">快递公司：</span><span class="sp4">${obj.ExpressName}</span>
                                    <input type="button" onclick="searchwl('${obj.ExpressNumber}', '${obj.ExpressCode}', '${obj.ExpressName}')" value='查询物流' class ='layui-btn layui-btn-xs'>`;
                        }

                        var isdel = "";
                        if (obj.IsDelete == true) {
                            isdel = `<span class ="sp1" style="margin-left:16px;color:red">发货已撤销</span>`;
                        }

                        html += `
                            <li class="layui-timeline-item">
                                <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                                <div class="layui-timeline-content layui-text">
                                    <span class ="sp1">发货时间：</span><span class="sp2">${obj.DeliverTime}</span>
                                    <span class ="sp1" style="margin-left:42px;">发货人：</span><span class="sp2">${obj.SendUser_SelSourceName}</span>
                                    <span class ="sp1" style="margin-left:42px;">发货单号：</span><span class="sp2">${obj.DeliveyNumber}</span>
                                    ${isdel}
                                    <br />
                                    <span class ="sp3">发货类型：</span><span class="sp4">${DeliverType}</span>
                                    <span class ="sp3" style="margin-left:25px;">发货终端：</span><span class="sp4">${TagEnd}</span>
                                    ${wl}
                                </div>
                            </li>`;
                    });
                    $("#wlist").append(html);
                }
            }
        });


    }

    layui.data.sendParams = function (params) {
        layui.use(['table'], function () {

            var table = layui.table,
                admin = layui.admin,
                $ = layui.$,
                view = layui.view
            form = layui.form;

            //if (!(params.State_Sel == 1 || params.State_Sel == 2)) {
            //    $("#SendData").attr("style", "display:none;");
            //}

            var colsdata = [[
                //{ type: 'checkbox', fixed: 'left', field: 'PID' }, //sort: true  //hide: true //  width:100
                // { field: 'Brand', title: '品牌' },
                { field: 'Name', title: '商品名称', minWidth: 320 },
                { field: 'Specifications', title: '规格', minWidth: 150 },
                {
                    field: 'Path_Upload', title: '商品图片', width: 100, templet: function (d) {
                        return "<img width=\"34\" height=\"34\" src=\"" + layui.setter.ImgPath + d.Path_Upload + "\" />";
                    }
                },
                {
                    field: 'Price', title: '商品支付单价', width: 120, templet: function (d) {
                        return "<span style=\"color:#FF5722;font-weight:bold;\">￥" + d.Price + "</span>";
                    }
                },
                {
                    field: 'Count', title: '下单数量', width: 120, templet: function (d) {
                        return "<span style=\"color:#2F4056;font-weight:bold;\">" + d.Count + "</span>";
                    }
                },
                {
                    field: 'DiscountPrice', title: '优惠金额', width: 120, templet: function (d) {
                        return "<span style=\"color:#FF5722;font-weight:bold;\">￥" + d.DiscountPrice + "</span>";
                    }
                },
                {
                    field: 'AllPrice', title: '总价', width: 120, templet: function (d) {
                        return "<span style=\"color:#FF5722;font-weight:bold;\">￥" + d.AllPrice + "</span>";
                    }
                },
                {
                    field: 'ReturnPriceState', title: '商品退款状态', width: 120, templet: function (d) {
                        var html = "";
                        if (d.ReturnPriceState == 1) {
                            html = "<span style=\"color:#FF5722;font-weight:bold;\">退款中</span>";
                        } else if (d.ReturnPriceState == 2) {
                            html = "<span style=\"color:#01AAED;font-weight:bold;\">已退款</span>";
                        } else if (d.ReturnPriceState == 3) {
                            html = "<span style=\"color:#FFB800;font-weight:bold;\">拒绝退款</span>";
                        } else if (d.ReturnPriceState == 4) {
                            html = "<span style=\"color:#393D49;font-weight:bold;\">退款失败</span>";
                        } else {
                            html = "<span style=\"color:#c2c2c2;font-weight:bold;\">无</span>";
                        }
                        return html;
                    }
                },
                // {
                //     field: 'DeliverCount', title: '已发货数量',
                // },
                // {
                //     field: 'SendCount', title: '修改发货数量', edit: 'text'
                // }
            ]]

            table.render({
                elem: "#LAY-app-content-listsq"
                , method: "post"
                , url: layui.setter.APIUrl + '/shop/order_GoodsMgr/listPain'
                , where: { PID: params.PID, limit: 100 }
                , headers: { //通过 request 头传递
                    Authorization: "bearer " + layui.data('layuiAdmin').access_token
                }
                , width: "90%"
                , parseData: function (res) { //res 即为原始返回的数据 
                    return {
                        "ResultCode": res.ResultCode, //解析接口状态
                        "ResultInfo": res.ResultInfo, //解析提示文本
                        "count": res.Data.TotalRecordCount, //解析数据长度
                        "Data": res.Data.Items //解析数据列表 
                    };
                }
                , cols: colsdata
                , page: false
                , text: {
                    none: '暂无相关数据' 
                }
            });

            table.on('edit(LAY-app-content-listsq)', function (obj) {
                var value = obj.value //得到修改后的值
                    , data = obj.data //得到所在行所有键值
                    , field = obj.field; //得到字段

                var reg = new RegExp("^[0-9]*$");
                if (!reg.test(value)) {
                    alert("请输入正确的数字！")
                    return false;
                }

                if (data.Count - data.DeliverCount < value) {
                    alert("超出可发货数量，请重新填写!")
                    return false;
                }
            });

            admin.req({
                url: layui.setter.APIUrl + '/Shop/OrderMgr/getModel' //实际使用请改成服务端真实接口
                , data: { "key": params.PID }
                , type: "post"
                , done: function (res) {
                    var data = res.Data.data[0];
                    //form.val("layuiadmin-app-form-submit", {
                    //    "OrderNumber": data.OrderNumber,
                    //    "AllPrice": data.OrderPrice,
                    //    "CreateTime": data.CreateTime,
                    //    "UserAddress": data.UserAddress,
                    //    "UserName": data.UserName,
                    //    "UserTel": data.UserTel,
                    //    "GroupName": data.GroupName,
                    //    "RMKsq": data.RMK,
                    //    "CreateUser": data.User_SelSourceName,          
                    //    "BillCodestr":data.BillCodestr,
                    //    "BillMod":data.BillMod,
                    //    "BillStateName": data.BillStateName
                    //});
                    $("#UserName").text(data.UserName);
                    $("#UserTel").text(data.UserTel);
                    $("#UserAddress").text(data.UserAddress);
                    $("#RMKsq").text(data.RMK);
                    $("#OrderNumber").text(data.OrderNumber);
                    $("#BillCodestr").text(data.BillCodestr);
                    $("#StateName").text(data.StateName);
                    $("#BillStateName").text(data.BillStateName);
                    if (data.DistributionMode_Sel == 0) {
                        $("#DistributionMode_Sel").text("自提");
                        $("#PickInfo").text("(自提码：" + data.PickCode + " 自提点：" + data.PickAddress + ")");
                    } else {
                        $("#DistributionMode_Sel").text("快递");
                    }
                    $("#OrderPrice").text(data.OrderPrice);
                    $("#FarePrice").text(data.FarePrice);
                    $("#DiscountPrice").text(data.DiscountPrice);
                    $("#PayPrice").text(data.PayPrice);
                    if (data.IsGroupBuy == 1) { $("#IsGroupBuy").text("是"); } else { $("#IsGroupBuy").text("否"); }
                    if (data.IsUseCoupon == 1) { $("#IsUseCoupon").text("是"); } else { $("#IsUseCoupon").text("否"); } 
                    $("#CouponCode").text(data.CouponCode);
                    $("#MemberInfo").text(data.User_SelSourceName + " (会员编号：" + data.UserMemberCode + ")");
                    $("#CreateTime").text(data.CreateTime);
                    if (data.PayTime != null) { $("#PayTime").text(data.PayTime); }
                    if (data.ConfirmTime != null) { $("#ConfirmTime").text(data.ConfirmTime); }
                }
            });
        })
    };

    layui.data.orderreturn = function (params) {
        layui.use(['table'], function () {

            var table = layui.table,
                admin = layui.admin,
                $ = layui.$,
                view = layui.view
            form = layui.form;

            var colsdata = [[
                //{ type: 'checkbox', fixed: 'left', field: 'PID' }, //sort: true  //hide: true //  width:100
                { field: 'Code', title: '退款单号', width: 150 },
		        {
		            field: 'ReturnType', title: '退款类型', width: 120, templet: function (d) {
		                var html = "";
		                if (d.ReturnType == 0) {
		                    html = "<span class='bksp'>商品退款</span>";
		                } else {
		                    html = "<span class='bksp1'>整单退款</span>";
		                }
		                return html;
		            }
		        },
          		{
          		    field: 'Name', title: '申请商品', minWidth: 320, templet: function (d) {
          		        var html = "";
          		        if (d.ReturnType == 0) {
          		            html = "<span style='font-weight:bold'>" + d.Name + "</span><br />";
          		        } else {
          		            html = "<span style='color:#c2c2c2'>订单商品</span>";
          		        }
          		        return html;
          		    }
          		},
                { field: 'Num', title: '申请数量', width: 120 },
                {
                    field: 'ReturnPrice', title: '退款金额', width: 120, templet: function (d) {
                        var html = "<span style='color:#FF5722;font-weight:bold;'>￥</span><span style='color:#FF5722;font-weight:bold;font-size:1.1em'>" + d.ReturnPrice + "</span>";
                        return html;
                    }
                },
		        {
		            field: 'ReturnMode', title: '退货方式', width: 120, templet: function (d) {
		                var html = "";
		                if (d.ReturnMode == 1) {
		                    html = "<span style='font-weight:bold'>快递寄回</span>";
		                } else if (d.ReturnMode == 2) {
		                    html = "<span style='font-weight:bold'>送回店铺</span>";
		                } else {
		                    html = "<span style='color:#d2d2d2;font-weight:bold'>无需退货</span>";
		                }
		                return html;
		            }
		        },
	         	{ field: 'Reason', title: '申请原因', minWidth: 180 },
		        {
		            field: 'State', title: '状态', width: 120, templet: function (d) {
		                var html = "";
		                if (d.State == 0) {
		                    html = "<span style='color:#FF5722;font-weight:bold'>申请中</span>";
		                } else if (d.State == 1) {
		                    html = "<span style='color:#5FB878;font-weight:bold'>同意退款</span>";
		                } else if (d.State == 2) {
		                    html = "<span style='color:#2F4056;font-weight:bold'>拒绝退款</span>";
		                } else {
		                    html = "<span style='color:#c2c2c2;font-weight:bold'>取消</span>";
		                }
		                if (d.State == 1 && d.RefundResult == 2) {
		                    html += "<br /><span style='color:red;font-weight:bold'>退款失败</span>";
		                }
		                return html;
		            }
		        },
            ]]

            table.render({
                elem: "#LAY-app-content-listre"
                , method: "post"
                , url: layui.setter.APIUrl + '/shop/Order_returnMgr/listPainByOrder'
                , where: { orderid: params.PID, limit: 100 }
                , headers: { //通过 request 头传递
                    Authorization: "bearer " + layui.data('layuiAdmin').access_token
                }
                , width: "90%"
                , parseData: function (res) { //res 即为原始返回的数据 
                    return {
                        "ResultCode": res.ResultCode, //解析接口状态
                        "ResultInfo": res.ResultInfo, //解析提示文本
                        "count": res.Data.TotalRecordCount, //解析数据长度
                        "Data": res.Data.Items //解析数据列表 
                    };
                }
                , cols: colsdata
                , page: false
                , text: {
                    none: '暂无相关数据'
                }
            });
        })
    };


    function searchwl(expressNumber, expressCompanyCode, expressCompany) {
        var url = "/Home/center?code=" + expressNumber + "&company=" + expressCompanyCode + "&comname=" + expressCompany;
        layer.open({
            type: 2,
            title: '物流查询',
            shadeClose: true,
            shade: 0.8,
            area: ['500px', '84%'],
            content: url //iframe的url
        });
    }

</script>